import { PageContainer } from '@ant-design/pro-components';
import React ,{useEffect,useRef} from 'react';
import * as echarts from 'echarts';
import styled from 'styled-components';
const OneStyle = styled.div`
  .wogan{
    display:flex;
    justify-content: space-between;
    width: 100%;
    height: 120px;
    margin-bottom: 60px;
    ul{
      border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    padding-left: 0px;
    color: #303133;
    font-size: 16px;
    height: 100%;
    li{
      padding: 18px 20px;
      width: 380px;
      height: 57.6px;
    box-sizing: border-box;
    &:first-child{
      border-bottom: 1px solid #ebeef5;
    }
    }
    
    }
  }
`;
const DashBoard = function DashBoard() {
    
   const chartRef = useRef();
const options = {
    title: {
        // text: 'Stacked Area Chart'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['新增注册', '付费用户', '活跃用户', '订单数', '当日总收入']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['2021-03-11', '2021-03-12', '2021-03-13', '2021-03-14', '2021-03-15', '2021-03-16', '2021-03-17']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '新增注册',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '付费用户',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '活跃用户',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '订单数',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '当日总收入',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
}
useEffect(()=>{
    const chart = echarts.init(chartRef.current);
   chart.setOption(options);
   return ()=>{
    chart.dispose()
   }
},[])
    
    return <PageContainer>
<OneStyle>
    <div className="wogan">
        <ul>
          <li>今日订单数</li>
          <li>1888</li>
          </ul>
          <ul>
          <li>今日日活</li>
          <li>36271</li>
          </ul>
          <ul>
          <li>转化率</li>
          <li>20%</li>
          </ul>
    </div>
    </OneStyle>
        <div style={{width:'1174px',height:'300px'}} ref={chartRef}>
         
         </div>
    </PageContainer>
};
export default DashBoard;